<template>
	<view class="container">
		<view class="module1">
			<view class="row">
				<view class="flex-row" @tap="onHandlerItemsClick(item.pageUrl)" v-for="(item,index) in items" :key="index">
					<image :src="item.iconUrl"/>
					<text>{{ item.text }}</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					{
						iconUrl: "/static/image/file.png",
						text: '雨情监测',
						pageUrl: '/pages/rain/rain'
					},
					{
						iconUrl: "/static/image/file.png",
						text: 'eCharts',
						pageUrl: '/pages/eCharts/eCharts'
					},
					{
						iconUrl: "/static/image/file.png",
						text: '雨情监测',
						pageUrl: '/pages/rain/rain'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			onHandlerItemsClick(pageUrl) {
				uni.navigateTo({
					url: pageUrl
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/style/font.scss";
	
	.container {
		background-color: $uni-bg-color-light-grey;
		height: 100%;
		
		.module1 {
			background-color: $uni-bg-color;
			padding: 30rpx 0;
			box-shadow: $box-shadow;
			.row{
				display: flex;		 
				justify-content: flex-start;
				align-items: center;
				.flex-row {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 0 20rpx;
					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
			
			
		}
	}
</style>
